<template>
  <div class="exhibits-List3" v-if="props.tabDatas.length === 3">
    <!-- <t-row style="width: 100%" :gutter="20"> -->
    <div v-for="(item, index) in props.tabDatas" :key="index" @click="pathInfo(item.id)" style="cursor: pointer">
      <div
        class="exhibits-item"
        ref="exhibitsItem"
        :style="{
          width: index == 0 ? '580px' : '280px',
        }"
      >
        <div style="overflow: hidden">
          <t-image
            fit="cover"
            class="exhibits-item-img"
            src="http://101.34.143.36:8890/api/image/387939155165253"
            alt=""
            v-if="!item.coverUrl"
          />
          <t-image
            fit="cover"
            class="exhibits-item-img"
            style="height: 358px"
            :style="{
              width: index == 0 ? '580px' : '280px',
            }"
            :src="$filters.getLinkUrl(item.coverUrl, `?imageView2/1/w/${index == 0 ? 580 : 280}/h/358/format/webp`)"
            alt=""
            v-else
          />
          <div
            class="shadow"
            :style="{
              width: index == 0 ? '580px' : '280px',
            }"
          ></div>
          <div
            class="item-btm"
            :class="item - btm + index"
            :style="{
              width: index == 0 ? '295px' : '216px',
              left: index == 0 ? '25%' : '15%',
              '-webkit-line-clamp': index == 0 ? 1 : 2,
            }"
          >
            <span
              class="item-title1"
              :style="{
                fontSize: store.styleInfo.mintitleSize,
              }"
              >{{ item.name }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <!-- </t-row> -->
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../../route';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import { handlemouse } from '@/utils/minxin';
import { onMounted, ref } from 'vue';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import textMax from '@/components/textMax/textMax.vue';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const route = useRoute();
const router = useRouter();
const store = useProjectStore();
const exhibitsItem = ref(null);
const props = defineProps({
  info: {
    type: Object,
  },
  tabDatas: {
    type: Array,
  },
});
onMounted(() => {
  //console.log(exhibitsItem.value);
  // setTimeout(() => {
  //   exhibitsItem.value[0].style.opacity = '1';
  // }, 300);
  animation();
});

const pathInfo = (e: any) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: props.info.id },
  });
};

const animation = () => {
  let canTrigger = true; // 标记是否可以触发

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码s
        //console.log('c', exhibitsItem.value[0]);
        exhibitsItem.value[0].classList.add('animation-box2');
        setTimeout(() => {
          exhibitsItem.value[1].classList.add('animation-box2');
        }, 300);
        setTimeout(() => {
          exhibitsItem.value[2].classList.add('animation-box2');
        }, 600);
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (exhibitsItem.value) {
        //   exhibitsItem.value[0].classList.remove('animation-box2');
        //   exhibitsItem.value[1].classList.remove('animation-box2');
        //   exhibitsItem.value[2].classList.remove('animation-box2');
        // }
      }
    });
  });
  observer.observe(exhibitsItem.value[0], exhibitsItem.value[1], exhibitsItem.value[2]);
};
</script>

<style lang="less" scoped>
@import '../index.less';

.exhibits-text {
  width: 50%;
}
.exhibits-item {
  width: 100%;
  position: relative;
  transition: all 0.5s;
  opacity: 0;
  .exhibits-item-img {
    width: 100%;
    height: auto;
    transition: all 0.5s;
  }
}
.item-btm {
  width: 300px;
  height: 30px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 25%;
  transform: translateX(-25%);
  z-index: 101;
  top: 165px;
  transform: translateY(195px);
  opacity: 0;
  transition: all 0.5s;
  color: #fff;

  overflow: hidden;
  // white-space: nowrap;
  // text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.exhibits-List3 {
  width: 100%;
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
}
.item-title1 {
  font-weight: 500;
  line-height: 30px;
}

.exhibits-item:hover .item-btm {
  transform: translateY(0);
  opacity: 1;
}

.shadow {
  width: 580px;
  height: 358px;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.5s;
  z-index: 99;
  // border-radius: 50%;
}
.exhibits-item:hover .shadow {
  background: rgba(0, 0, 0, 0.4);
}
.exhibits-item:hover .exhibits-item-img {
  transform: scale(1.1);
}
.animation-box2 {
  animation: slideIn 1s forwards;
}
@keyframes slideIn {
  0% {
    // padding-right: 980px;
    transform: translateX(-10%); /* 元素初始位置 */
    opacity: 0;
  }
  100% {
    padding-right: 0px;
    opacity: 1;
    transform: translateX(0); /* 元素最终位置 */
  }
}
</style>
